<template>
  <el-form
    ref="loginForm"
    :model="form"
    :rules="rules"
    label-width="0"
    size="large"
  >
    <el-form-item prop="user">
      <el-input
        v-model="form.user"
        prefix-icon="el-icon-user"
        clearable
        :placeholder="t('login.userPlaceholder')"
      >
        <template #append>
          <el-select v-model="userType" style="width: 130px">
            <el-option :label="t('login.admin')" value="admin"></el-option>
            <el-option :label="t('login.user')" value="user"></el-option>
          </el-select>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        v-model="form.password"
        prefix-icon="el-icon-lock"
        clearable
        show-password
        :placeholder="t('login.PWPlaceholder')"
      ></el-input>
    </el-form-item>
    <el-form-item style="margin-bottom: 10px">
      <el-col :span="12">
        <el-checkbox
          :label="t('login.rememberMe')"
          v-model="form.autologin"
        ></el-checkbox>
      </el-col>
      <el-col :span="12" class="login-forgot">
        <router-link to="/reset_password"
          >{{ t("login.forgetPassword") }}？</router-link
        >
      </el-col>
    </el-form-item>
    <el-form-item>
      <el-button
        type="primary"
        style="width: 100%"
        :loading="islogin"
        round
        @click="login"
        >{{ t("login.signIn") }}
      </el-button>
    </el-form-item>
    <div class="login-reg">
      {{ t("login.noAccount") }}
      <router-link to="/user_register">{{
        t("login.createAccount")
      }}</router-link>
    </div>
  </el-form>
</template>

<script>
export default {
  name: "passwordForm",
};
</script>

<script setup>
import { reactive, ref, watch } from "vue";
import tool from "@/utils/tool";
import api from "@/api/index";
import { useI18n } from "vue-i18n";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
const { t } = useI18n();
const { replace } = useRouter();
const loginForm = ref(null);

let userType = ref("admin");
let form = reactive({
  user: "admin",
  password: "admin",
  autologin: false,
});
let rules = reactive({
  user: [
    {
      required: true,
      message: t("login.userError"),
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: t("login.PWError"),
      trigger: "blur",
    },
  ],
});

let islogin = ref(false);

watch(userType, (val) => {
  if (val == "admin") {
    form.user = "admin";
    form.password = "admin";
  } else if (val == "user") {
    form.user = "user";
    form.password = "user";
  }
});

const login = async () => {
  var validate = await loginForm.value.validate().catch(() => {});
  if (!validate) {
    return false;
  }

  islogin.value = true;
  var data = {
    username: form.user,
    password: tool.crypto.MD5(form.password),
  };
  // //获取token
  var user = await api.auth.token.post(data);
  if (user.code == 200) {
    tool.cookie.set("TOKEN", user.data.token, {
      expires: form.autologin ? 24 * 60 * 60 : 0,
    });
    tool.data.set("USER_INFO", user.data.userInfo);
  } else {
    islogin.value = false;
    ElMessage.warning(user.message);
    return false;
  }
  //获取菜单
  var menu = null;
  if (form.user == "admin") {
    menu = await api.system.menu.myMenus.get();
  } else {
    menu = await api.demo.menu.get();
  }

  if (menu.code == 200) {
    if (menu.data.menu.length == 0) {
      islogin.value = false;
      ElMessageBox.alert(
        "当前用户无任何菜单权限，请联系系统管理员",
        "无权限访问",
        {
          type: "error",
          center: true,
        }
      );
      return false;
    }

    tool.data.set("MENU", menu.data.menu);
    tool.data.set("PERMISSIONS", menu.data.permissions);
  } else {
    islogin.value = false;
    ElMessage.warning(menu.message);
    return false;
  }

  replace({
    path: "/",
  });
  ElMessage.success("Login Success 登录成功");
  islogin.value = false;
};
</script>

<style lang="scss" scoped></style>
